<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="keywords" content="hexo, autumn">
    <title>
        弋泠
    </title>
    <!-- favicon -->
    
    <link rel="icon" href="https://cdn.jsdelivr.net/gh/frontendsophie/hexo-theme-autumn@1.0.0/source/img/favicon.ico">
     <link rel="stylesheet" href="/css/style.css">

    <!-- highlight -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/github-gist.min.css">
    <script src="//cdn.bootcss.com/highlight.js/9.2.0/highlight.min.js"></script>
    <script>
        hljs.initHighlightingOnLoad()
    </script>
    <script src="https://cdn.jsdelivr.net/gh/frontendsophie/hexo-infinite-scroll@2.0.0/dist/main.js"></script>

    <script>
        infiniteScroll()

        window.addEventListener('DOMContentLoaded', function () {
            const [
                mainTitle,
                mobileMenu,
                mobileMainTitle,
                mobileMenuBtn,
                ipadMenuBtn,
                aside,
                closeBtn,
            ] = getEle(
                '#main-title',
                '.mobile-menu',
                '.mobile-menu h3',
                '.mobile-menu button',
                '.ipad-menu',
                'aside',
                'aside .close',
            )
            const io = new IntersectionObserver(entries => {
                if (entries[0].intersectionRatio <= 0) {
                    mobileMainTitle.classList.remove('invisibile')
                } else {
                    mobileMainTitle.classList.add('invisibile')
                }
            })
            io.observe(mainTitle)

            clickToggleAside(mobileMenuBtn)
            clickToggleAside(ipadMenuBtn)
            clickToggleAside(closeBtn, false)

            const isMenuVisible = window.getComputedStyle(mobileMenu).display !== 'none'
            if (isMenuVisible) document.body.style.background = 'none'

            function getEle(...args) {
                return args.map(arg => document.querySelector(arg))
            }

            function clickToggleAside(btn, show = true) {
                btn.addEventListener('click', function () {
                    if (show) {
                        aside.style.display = 'block'
                    } else {
                        aside.style.display = 'none'
                    }
                })
            }
        })
    </script>
</head>

<body style="background: url(https://cdn.jsdelivr.net/gh/frontendsophie/hexo-theme-autumn@1.0.0/source/img/button-bg.png) #f3f3f3">
    <div class="container">
        <header class="header">
    <nav class="mobile-menu" style="background: url(https://cdn.jsdelivr.net/gh/frontendsophie/hexo-theme-autumn@1.0.0/source/img/button-bg.png) #f3f3f3">
        <h3 class="invisibile">
            <a href="/" class="logo">
                弋泠
            </a>
        </h3>
        <button class="menu">menu</button>
    </nav>

    <button class="ipad-menu menu">menu</button>

    <h1 class="title" id="main-title">
        <a href="/" class="logo">
            弋泠
        </a>
    </h1>
    <h2 class="desc">
        随笔博客(ง •_•)ง
    </h2>

    <div class="links">
        <ul>
            
            <li>
                <a href="https://github.com/uhyintl">
                    Github
                </a>
            </li>
            
            <li>
                <a href="https://www.linkedin.com/yminek">
                    LinkedIn
                </a>
            </li>
            
        </ul>
    </div>
</header>
        <main class="main">
            <article class="post">
    
    
    <h4 class="post-cat">
        <a href="/categories/web/">
            web
        </a>
    </h4>
    
    
    <h2 class="post-title">
        HTML下雪特效
    </h2>
    <ul class="post-date">
        <li>
            2019-10-01
        </li>
        <li>
            uhyintl
        </li>
    </ul>
    <div class="post-content">
        <blockquote>
<p>今天我们就来学习下让你的html页面“下雪”  让html页面“下雪”的原理很简单，就是一段JavaScript代码就可以解决的事了<br><img src="https://cdn.wc1234.cn/wp-file/2018/12/c4f083a1451ba858638f44be02ed0f91.gif" alt></p>
</blockquote>
<h3 id="一、下雪特效代码①"><a href="#一、下雪特效代码①" class="headerlink" title="一、下雪特效代码①"></a>一、下雪特效代码①</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;(<span class="function"><span class="keyword">function</span>(<span class="params">$</span>)</span>&#123;</span><br><span class="line">	$.fn.snow = <span class="function"><span class="keyword">function</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> $flake = $(<span class="string">'&lt;div id="snowbox" /&gt;'</span>).css(&#123;<span class="string">'position'</span>: <span class="string">'absolute'</span>,<span class="string">'z-index'</span>:<span class="string">'9999'</span>, <span class="string">'top'</span>: <span class="string">'-50px'</span>&#125;).html(<span class="string">'&amp;#10052;'</span>),</span><br><span class="line">	documentHeight 	= $(<span class="built_in">document</span>).height(),</span><br><span class="line">	documentWidth	= $(<span class="built_in">document</span>).width(),</span><br><span class="line">	defaults = &#123;</span><br><span class="line">		minSize		: <span class="number">10</span>,</span><br><span class="line">		maxSize		: <span class="number">20</span>,</span><br><span class="line">		newOn		: <span class="number">1000</span>,</span><br><span class="line">		flakeColor	: <span class="string">"#AFDAEF"</span> <span class="comment">/* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */</span></span><br><span class="line">	&#125;,</span><br><span class="line">	options	= $.extend(&#123;&#125;, defaults, options);</span><br><span class="line">	<span class="keyword">var</span> interval= setInterval( <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> startPositionLeft = <span class="built_in">Math</span>.random() * documentWidth - <span class="number">100</span>,</span><br><span class="line">	startOpacity = <span class="number">0.5</span> + <span class="built_in">Math</span>.random(),</span><br><span class="line">	sizeFlake = options.minSize + <span class="built_in">Math</span>.random() * options.maxSize,</span><br><span class="line">	endPositionTop = documentHeight - <span class="number">200</span>,</span><br><span class="line">	endPositionLeft = startPositionLeft - <span class="number">500</span> + <span class="built_in">Math</span>.random() * <span class="number">500</span>,</span><br><span class="line">	durationFall = documentHeight * <span class="number">10</span> + <span class="built_in">Math</span>.random() * <span class="number">5000</span>;</span><br><span class="line">	$flake.clone().appendTo(<span class="string">'body'</span>).css(&#123;</span><br><span class="line">		left: startPositionLeft,</span><br><span class="line">		opacity: startOpacity,</span><br><span class="line">		<span class="string">'font-size'</span>: sizeFlake,</span><br><span class="line">		color: options.flakeColor	&#125;).animate(&#123;</span><br><span class="line">		top: endPositionTop,</span><br><span class="line">		left: endPositionLeft,</span><br><span class="line">		opacity: <span class="number">0.2</span></span><br><span class="line">	&#125;,durationFall,<span class="string">'linear'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		$(<span class="keyword">this</span>).remove()</span><br><span class="line">	&#125;);</span><br><span class="line">	&#125;, options.newOn);</span><br><span class="line">    &#125;&#125;)(jQuery);$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $.fn.snow(&#123;</span><br><span class="line">	    minSize: <span class="number">5</span>, <span class="comment">/* 定义雪花最小尺寸 */</span></span><br><span class="line">	    maxSize: <span class="number">50</span>,<span class="comment">/* 定义雪花最大尺寸 */</span></span><br><span class="line">	    newOn: <span class="number">300</span>  <span class="comment">/* 定义密集程度，数字越小越密集 */</span></span><br><span class="line">    &#125;)&#125;);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>Ps：由于博客背景是浅色的，所以把雪花改成了淡蓝色，如果喜欢其他颜色的，可以根据注释自行修改。</p>
</blockquote>
<h3 id="二、下雪特效代码②"><a href="#二、下雪特效代码②" class="headerlink" title="二、下雪特效代码②"></a>二、下雪特效代码②</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="comment">/* 控制下雪 */</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">snowFall</span>(<span class="params">snow</span>) </span>&#123;</span><br><span class="line">        <span class="comment">/* 可配置属性 */</span></span><br><span class="line">        snow = snow || &#123;&#125;;</span><br><span class="line">        <span class="keyword">this</span>.maxFlake = snow.maxFlake || <span class="number">200</span>;   <span class="comment">/* 最多片数 */</span></span><br><span class="line">        <span class="keyword">this</span>.flakeSize = snow.flakeSize || <span class="number">10</span>;  <span class="comment">/* 雪花形状 */</span></span><br><span class="line">        <span class="keyword">this</span>.fallSpeed = snow.fallSpeed || <span class="number">1</span>;   <span class="comment">/* 坠落速度 */</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">/* 兼容写法 */</span></span><br><span class="line">    requestAnimationFrame = <span class="built_in">window</span>.requestAnimationFrame ||</span><br><span class="line">        <span class="built_in">window</span>.mozRequestAnimationFrame ||</span><br><span class="line">        <span class="built_in">window</span>.webkitRequestAnimationFrame ||</span><br><span class="line">        <span class="built_in">window</span>.msRequestAnimationFrame ||</span><br><span class="line">        <span class="built_in">window</span>.oRequestAnimationFrame ||</span><br><span class="line">        <span class="function"><span class="keyword">function</span>(<span class="params">callback</span>) </span>&#123; setTimeout(callback, <span class="number">1000</span> / <span class="number">60</span>) &#125;;</span><br><span class="line"></span><br><span class="line">    cancelAnimationFrame = <span class="built_in">window</span>.cancelAnimationFrame ||</span><br><span class="line">        <span class="built_in">window</span>.mozCancelAnimationFrame ||</span><br><span class="line">        <span class="built_in">window</span>.webkitCancelAnimationFrame ||</span><br><span class="line">        <span class="built_in">window</span>.msCancelAnimationFrame ||</span><br><span class="line">        <span class="built_in">window</span>.oCancelAnimationFrame;</span><br><span class="line">    <span class="comment">/* 开始下雪 */</span></span><br><span class="line">    snowFall.prototype.start = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">/* 创建画布 */</span></span><br><span class="line">        snowCanvas.apply(<span class="keyword">this</span>);</span><br><span class="line">        <span class="comment">/* 创建雪花形状 */</span></span><br><span class="line">        createFlakes.apply(<span class="keyword">this</span>);</span><br><span class="line">        <span class="comment">/* 画雪 */</span></span><br><span class="line">        drawSnow.apply(<span class="keyword">this</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">/* 创建画布 */</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">snowCanvas</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="comment">/* 添加Dom结点 */</span></span><br><span class="line">        <span class="keyword">var</span> snowcanvas = <span class="built_in">document</span>.createElement(<span class="string">"canvas"</span>);</span><br><span class="line">        snowcanvas.id = <span class="string">"snowfall"</span>;</span><br><span class="line">        snowcanvas.width = <span class="built_in">window</span>.innerWidth;</span><br><span class="line">        snowcanvas.height = <span class="built_in">document</span>.body.clientHeight;</span><br><span class="line">        snowcanvas.setAttribute(<span class="string">"style"</span>, <span class="string">"position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;"</span>);</span><br><span class="line">        <span class="built_in">document</span>.getElementsByTagName(<span class="string">"body"</span>)[<span class="number">0</span>].appendChild(snowcanvas);</span><br><span class="line">        <span class="keyword">this</span>.canvas = snowcanvas;</span><br><span class="line">        <span class="keyword">this</span>.ctx = snowcanvas.getContext(<span class="string">"2d"</span>);</span><br><span class="line">        <span class="comment">/* 窗口大小改变的处理 */</span></span><br><span class="line">        <span class="built_in">window</span>.onresize = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            snowcanvas.width = <span class="built_in">window</span>.innerWidth;</span><br><span class="line">            <span class="comment">/* snowcanvas.height = window.innerHeight */</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">/* 雪运动对象 */</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">flakeMove</span>(<span class="params">canvasWidth, canvasHeight, flakeSize, fallSpeed</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.x = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * canvasWidth);   <span class="comment">/* x坐标 */</span></span><br><span class="line">        <span class="keyword">this</span>.y = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * canvasHeight);  <span class="comment">/* y坐标 */</span></span><br><span class="line">        <span class="keyword">this</span>.size = <span class="built_in">Math</span>.random() * flakeSize + <span class="number">2</span>;          <span class="comment">/* 形状 */</span></span><br><span class="line">        <span class="keyword">this</span>.maxSize = flakeSize;                           <span class="comment">/* 最大形状 */</span></span><br><span class="line">        <span class="keyword">this</span>.speed = <span class="built_in">Math</span>.random() * <span class="number">1</span> + fallSpeed;         <span class="comment">/* 坠落速度 */</span></span><br><span class="line">        <span class="keyword">this</span>.fallSpeed = fallSpeed;                         <span class="comment">/* 坠落速度 */</span></span><br><span class="line">        <span class="keyword">this</span>.velY = <span class="keyword">this</span>.speed;                             <span class="comment">/* Y方向速度 */</span></span><br><span class="line">        <span class="keyword">this</span>.velX = <span class="number">0</span>;                                      <span class="comment">/* X方向速度 */</span></span><br><span class="line">        <span class="keyword">this</span>.stepSize = <span class="built_in">Math</span>.random() / <span class="number">30</span>;                 <span class="comment">/* 步长 */</span></span><br><span class="line">        <span class="keyword">this</span>.step = <span class="number">0</span>                                       <span class="comment">/* 步数 */</span></span><br><span class="line">    &#125;</span><br><span class="line">    flakeMove.prototype.update = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> x = <span class="keyword">this</span>.x,</span><br><span class="line">            y = <span class="keyword">this</span>.y;</span><br><span class="line">        <span class="comment">/* 左右摆动(余弦) */</span></span><br><span class="line">        <span class="keyword">this</span>.velX *= <span class="number">0.98</span>;</span><br><span class="line">        <span class="keyword">if</span> (<span class="keyword">this</span>.velY &lt;= <span class="keyword">this</span>.speed) &#123;</span><br><span class="line">            <span class="keyword">this</span>.velY = <span class="keyword">this</span>.speed        &#125;</span><br><span class="line">        <span class="keyword">this</span>.velX += <span class="built_in">Math</span>.cos(<span class="keyword">this</span>.step += <span class="number">.05</span>) * <span class="keyword">this</span>.stepSize;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">this</span>.y += <span class="keyword">this</span>.velY;</span><br><span class="line">        <span class="keyword">this</span>.x += <span class="keyword">this</span>.velX;</span><br><span class="line">        <span class="comment">/* 飞出边界的处理 */</span></span><br><span class="line">        <span class="keyword">if</span> (<span class="keyword">this</span>.x &gt;= canvas.width || <span class="keyword">this</span>.x &lt;= <span class="number">0</span> || <span class="keyword">this</span>.y &gt;= canvas.height || <span class="keyword">this</span>.y &lt;= <span class="number">0</span>) &#123;</span><br><span class="line">            <span class="keyword">this</span>.reset(canvas.width, canvas.height)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="comment">/* 飞出边界-放置最顶端继续坠落 */</span></span><br><span class="line">    flakeMove.prototype.reset = <span class="function"><span class="keyword">function</span>(<span class="params">width, height</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.x = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * width);</span><br><span class="line">        <span class="keyword">this</span>.y = <span class="number">0</span>;</span><br><span class="line">        <span class="keyword">this</span>.size = <span class="built_in">Math</span>.random() * <span class="keyword">this</span>.maxSize + <span class="number">2</span>;</span><br><span class="line">        <span class="keyword">this</span>.speed = <span class="built_in">Math</span>.random() * <span class="number">1</span> + <span class="keyword">this</span>.fallSpeed;</span><br><span class="line">        <span class="keyword">this</span>.velY = <span class="keyword">this</span>.speed;</span><br><span class="line">        <span class="keyword">this</span>.velX = <span class="number">0</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="comment">// 渲染雪花-随机形状（此处可修改雪花颜色！！！）</span></span><br><span class="line">    flakeMove.prototype.render = <span class="function"><span class="keyword">function</span>(<span class="params">ctx</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> snowFlake = ctx.createRadialGradient(<span class="keyword">this</span>.x, <span class="keyword">this</span>.y, <span class="number">0</span>, <span class="keyword">this</span>.x, <span class="keyword">this</span>.y, <span class="keyword">this</span>.size);</span><br><span class="line">        snowFlake.addColorStop(<span class="number">0</span>, <span class="string">"rgba(255, 255, 255, 0.9)"</span>);  <span class="comment">/* 此处是雪花颜色，默认是白色 */</span></span><br><span class="line">        snowFlake.addColorStop(<span class="number">.5</span>, <span class="string">"rgba(255, 255, 255, 0.5)"</span>); <span class="comment">/* 若要改为其他颜色，请自行查 */</span></span><br><span class="line">        snowFlake.addColorStop(<span class="number">1</span>, <span class="string">"rgba(255, 255, 255, 0)"</span>);    <span class="comment">/* 找16进制的RGB 颜色代码。 */</span></span><br><span class="line">        ctx.save();</span><br><span class="line">        ctx.fillStyle = snowFlake;</span><br><span class="line">        ctx.beginPath();</span><br><span class="line">        ctx.arc(<span class="keyword">this</span>.x, <span class="keyword">this</span>.y, <span class="keyword">this</span>.size, <span class="number">0</span>, <span class="built_in">Math</span>.PI * <span class="number">2</span>);</span><br><span class="line">        ctx.fill();</span><br><span class="line">        ctx.restore();</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="comment">/* 创建雪花-定义形状 */</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">createFlakes</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> maxFlake = <span class="keyword">this</span>.maxFlake,</span><br><span class="line">            flakes = <span class="keyword">this</span>.flakes = [],</span><br><span class="line">            canvas = <span class="keyword">this</span>.canvas;</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; maxFlake; i++) &#123;</span><br><span class="line">            flakes.push(<span class="keyword">new</span> flakeMove(canvas.width, canvas.height, <span class="keyword">this</span>.flakeSize, <span class="keyword">this</span>.fallSpeed))</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">/* 画雪 */</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">drawSnow</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> maxFlake = <span class="keyword">this</span>.maxFlake,</span><br><span class="line">            flakes = <span class="keyword">this</span>.flakes;</span><br><span class="line">        ctx = <span class="keyword">this</span>.ctx, canvas = <span class="keyword">this</span>.canvas, that = <span class="keyword">this</span>;</span><br><span class="line">        <span class="comment">/* 清空雪花 */</span></span><br><span class="line">        ctx.clearRect(<span class="number">0</span>, <span class="number">0</span>, canvas.width, canvas.height);</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> e = <span class="number">0</span>; e &lt; maxFlake; e++) &#123;</span><br><span class="line">            flakes[e].update();</span><br><span class="line">            flakes[e].render(ctx);</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">/*  一帧一帧的画 */</span></span><br><span class="line">        <span class="keyword">this</span>.loop = requestAnimationFrame(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            drawSnow.apply(that);</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">/* 调用及控制方法 */</span></span><br><span class="line">    <span class="keyword">var</span> snow = <span class="keyword">new</span> snowFall(&#123;<span class="attr">maxFlake</span>:<span class="number">500</span>&#125;);</span><br><span class="line">    snow.start();&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h4 id="使用方法"><a href="#使用方法" class="headerlink" title="使用方法:"></a>使用方法:</h4><ul>
<li><p>方法①、复制其中一种 JS 代码，粘贴到网站标签之前即可；</p>
</li>
<li><p>方法②、去掉代码前后的<script>和</script>标签，然后将代码保存为 js 文件，最后在网站引用即可。</p>
</li>
<li><p>若没效果，请确认网页是否已载入 JQurey，如果没有请在下雪代码之前引入 JQurey 即可。</p>
</li>
<li><p>(附载入代码 来自bootcdn公共库)</p>
</li>
<li><p><code>&lt;script src=”https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js”&gt;&lt;/script&gt;</code></p>
</li>
</ul>

    </div>
</article>
        </main>
        <aside class="aside">
            <div class="close"></div>
            <section class="aside-section">
                
    <h1>Categories</h1>

    <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/souce/">souce</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/web/">web</a></li></ul>

            </section>
            <section class="aside-section">
                
    <h1>Archives</h1>

    <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/">2019</a></li></ul>


            </section>
            <section class="aside-section tag">
                
    <h1>Tags</h1>

    <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML/">HTML</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript/">JavaScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/java/">java</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/souce/">souce</a></li></ul>

            </section>
        </aside>
    </div>
</body>

</html>